import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Table, Popconfirm, Divider, Button, Input, Space, Tag, Drawer, Checkbox } from 'antd';
import { PlusOutlined, SyncOutlined } from '@ant-design/icons';
import { connect } from 'umi';
import moment from 'moment';
import ContentEdit from './components/contEdit';
import Categories from '@/pages/admin/categories';
import request from '@/utils/request';

const { Search } = Input;
const apiURL = '/api/services/app/Article/';
class ViewContent extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            dataSource: [],
            visible: false,
            selectedRowKeys: [],
            pageIndex: 1,
            pageSize: 10,
            totalCount: 0,
            payload: {},
        };
    }
    componentDidMount() {
        this.fetchDatas();
    }
    fetchDatas = () => {
        this.setState({ loading: true });
        const { pageIndex, pageSize,payload } = this.state;
        request(apiURL + 'GetList', {
            method: 'Get',
            params: {
                SkipCount: (pageIndex - 1) * pageSize,
                MaxResultCount: pageSize,
                ...payload
            },
        }).then((response) => {
            if (response && response.success) {
                var result = response.result;
                this.setState({
                    dataSource: result.items,
                    totalCount: result.totalCount
                });
            }
            this.setState({ loading: false });
        });
    };
    handleDelete = (id: number) => {
        request(apiURL + 'Delete', {
            method: 'Delete',
            params: { id },
        }).then((response) => {
            if (response && response.success) {
                this.fetchDatas();
            }
        });
    };
    handleAdd = () => {
        this.switchModal(true);
    };
    onSelectChange = (selectedRowKeys: any) => {
        this.setState({ selectedRowKeys });
    };
    onSearch = (value: any) => {
        var payload = this.state.payload;
        payload.keywords = value;
        this.setState({ payload }, () => {
            this.fetchDatas();
        });
    };
    switchModal = (visible: boolean, id: any = null) => {
        this.setState({ visible, id });
    };
    render() {
        const { loading, dataSource, selectedRowKeys, totalCount, pageSize } = this.state;
        const columns: any = [
            {
                title: '序号',
                key: 'index',
                width: 60,
                render: (_: any, __: any, i: any) => {
                    return i + 1;
                },
            },
            {
                title: '标题',
                dataIndex: 'title',
                ellipsis: true,
            },
            {
                title: '标签',
                dataIndex: 'tags',
                width: 180,
                render: (text: string) => <Tag color="lime">{text}</Tag>,
            },
            {
                title: '推荐',
                dataIndex: 'isRec',
                width: 80,
                render: (text: boolean) => <Checkbox checked={text} />,
            },
            {
                title: '发布时间',
                width: 200,
                dataIndex: 'creationTime',
                render: (text: string) => <span>{moment(text).format('YYYY-MM-DD HH:MM:SS')}</span>,
            },
            {
                title: '操作',
                render: (record: any) =>
                    dataSource.length >= 1 ? (
                        <span>
                            <Popconfirm title="确定删除?" onConfirm={() => this.handleDelete(record.id)}>
                                <a>删除</a>
                            </Popconfirm>
                            <Divider type="vertical" />
                            <a onClick={() => this.switchModal(true, record.id)}>编辑</a>
                        </span>
                    ) : null,
            },
        ];
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const hasSelected = selectedRowKeys.length > 0;
        return (
            <PageHeaderWrapper title={false}>
                <Card>
                    <Space>
                        <Button
                            type="primary"
                            onClick={this.fetchDatas}
                            loading={loading}
                            icon={<SyncOutlined />}
                        >
                            刷新
                        </Button>
                        <Button type="dashed" onClick={this.handleAdd} icon={<PlusOutlined />}>
                            添加
                        </Button>
                        <Button type="dashed" onClick={() => this.setState({ visible2: true })}>
                            添加分类
                        </Button>
                        <Search
                            placeholder="输入关键词搜索"
                            allowClear
                            onSearch={(value) => this.onSearch(value)}
                        />
                        <span>{hasSelected ? `选择了 ${selectedRowKeys.length} 项` : ''}</span>
                    </Space>
                </Card>
                <Table
                    rowKey="id"
                    loading={loading}
                    rowSelection={rowSelection}
                    columns={columns}
                    dataSource={dataSource}
                    pagination={{
                        onChange: (page) => {
                            this.setState({ pageIndex: page }, () => {
                                this.fetchDatas();
                            });
                        },
                        pageSize,
                        total: totalCount,
                    }}
                />
                <Drawer
                    width={600}
                    placement="right"
                    closable={false}
                    onClose={() => this.setState({ visible2: false })}
                    visible={this.state.visible2}
                    destroyOnClose={true}
                >
                    <Categories layout="article" />
                </Drawer>
                <Drawer
                    width={800}
                    placement="right"
                    closable={false}
                    onClose={() => this.switchModal(false)}
                    visible={this.state.visible}
                    destroyOnClose={true}
                >
                    <ContentEdit id={this.state.id} fetchDatas={this.fetchDatas} />
                </Drawer>
            </PageHeaderWrapper>
        );
    }
}

export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
}))(ViewContent);
